/**
 * 管理员用户管理页面
 * @author 韩睿倩
 */
<template>
  <div class="body">

    <!-- 用户列表 -->

    <el-table :data="tableData" stripe border>
      <el-table-column type="index" label="标号" width="80"></el-table-column>
      <el-table-column prop="userId" label="userId" width="180">
      </el-table-column>
      <el-table-column prop="nickName" label="昵称" width="200">
      </el-table-column>
      <el-table-column prop="phoneNumber" label="电话号" width="200">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="checkInfo(scope.$index, scope.row)">查看信息</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="pageChange.page" :page-size.sync="pageChange.pageSize" layout="prev, pager, next, jumper"
        :page-count="pageCount" class="page">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import {
  // getUserInfoAdmin,
  getUserlist,
} from "../../api/administrator/userInfoApi";
export default {
  name: "userManagement",
  compoments: {},
  data() {
    return {
      tableData: [
        {
          userId: "",
          address: "",
          nickName: "",
          phoneNumber: "",
        },
      ],
      pageChange: {
        query: '',
        page: 1,
        pageSize: 10,
      },
      pageCount: 0,
      // input: '',
      select: '',
      // total: 0,

      // config:{
      //   page:1,
      //   total:30
      // }
    };
  },
  // computed: {
  //   userId() {
  //     return this.$store.getters.userId;
  //   },
  // },
  methods: {
    getData() {
      getUserlist(this.pageChange)
        .then((res) => {
          // console.log("okkkkkkkkkk")
          console.log(res);
          // var arr = res.data.list;

          // console.log(res.data.list.length)
          // 这里处理后端返回的结果
          this.tableData = res.data.list;
          this.pageCount = res.data.totalPageNum;
          this.page = res.data.page;
          this.pageSize = res.data.pageSize
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //搜索用户，待定
    searchUser() {

    },

    //分页实现
    handleSizeChange(pageSize) {
      console.log(`每页 ${pageSize} 条`);
      this.pageChange.pageSize = pageSize;
      this.getData();
    },
    handleCurrentChange(page) {
      console.log(`当前页: ${page}`);
      this.pageChange.page = page;
      this.getData();
    },

    //查看用户详细信息
    checkInfo(index, tableData) {
      tableData = this.tableData;

      console.log("checkInfo success");
      // console.log((tableData[index].userId).toString());
      this.$store.dispatch("getUserIdAdmin", tableData[index].userId); //传递userId到全局变量，并且可以通过computed获取
      // this.$store.dispatch(tableData[index].userId);
      tableData[index].userId = (tableData[index].userId).toString()
      this.$router.push({
        path: "/administratorHome/userInfoPage",
        // query: {
        //   phoneNumber: this.tableData.phoneNumber,
        //   userId:this.tableData.userId
        // },
      });

      // console.log(tableData[index].userId)
      // getUserInfoAdmin(tableData[index])
      //   .then((res) => {
      //     console.log(tableData[index]);
      //     //传参userId等body成功
      //     console.log(res.data);
      //     console.log(res);
      //     this.tableData = res.data;
      //   })
      //   .catch();
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss">
.page {
  // margin-top: 15px;
  // margin-left: 80px;
  align-items: center;
  justify-content: center;
}

.el-table {
  // margin: 30px;
  width: 1000px;
  font-size: 17px;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-top: 20px;

}

.el-pagination {
  white-space: nowrap;
  margin: 20px;
  color: #303133;
  font-weight: 700;
  text-align: center;
 
}


</style>
